<!DOCTYPE html>
<html lang="en">
<head>
    <title>左右两栏布局demo</title>
    <meta charset="UTF-8">
    <link href="left-right.css" rel="stylesheet">
</head>
<body>
    <!--header start-->
    <div id="header" class="header">
        <div id="navi" class="navi">
            <ul>
                <li><a href="#">LOGO</a></li>
                <li><a href="#">导航一</a></li>
                <li><a href="#">导航二</a></li>
                <li><a href="#">导航三</a></li>
                <li><a href="#">导航四</a></li>
                <li><a href="#">导航五</a></li>
                <li><a href="#">导航六</a></li>
                <li><a href="#">导航七</a></li>
                <li><a href="#">导航八</a></li>
                <li><a href="#">导航九</a></li>
            </ul>
        </div>
    </div>
    <!--header end-->
    <!--page start-->
    <div class="page">
        <!--page-content start-->
        <div class="page-content">

            <div class="pic">
                <img src="images/top.png" >
            </div>
            <!--page-left start-->
            <div class="page-content-left">
                <div class="left-content">
                    <p class="left-content-title"><a href="#">回到首页</a></p>
                    <p class="left-content-small-title">导航标题</p>
                    <div class="left-content-main">
                        <h2 class="main-title"><a href="#">左半部内容大标题</a></h2>
                        <div class="main-note">
                            <span class="main-note-left">作者：我是作者 日期：2016-07-14 点击：我是点击量</span>
                            <span class="main-note-right">
                                <a href="#">这是</a>
                                <a href="#">内容</a>
                                <a href="#">的</a>
                                <a href="#">标签</a>
                            </span>
                        </div>
                        <div class="main-content">
                            这是列表内块中内容的简介，这篇文章主要分析这篇文章主要分析下左右布局的实现， 以及如何在左右布局的基础上实现一个自适应效果， 感兴趣的同学可以点击进入阅读全文
                        </div>
                        <div class="main-btn">
                            <button type="button" class="main-btn1">阅读全文<tton>
                        </div>
                    </div>

                    <div class="left-content-main">
                        <h2 class="main-title"><a href="#">左半部内容大标题</a></h2>
                        <div class="main-note">
                            <span class="main-note-left">作者：我是作者 日期：2016-07-14 点击：我是点击量</span>
                            <span class="main-note-right">
                                <a href="#">这是</a>
                                <a href="#">内容</a>
                                <a href="#">的</a>
                                <a href="#">标签</a>
                            </span>
                        </div>
                        <div class="main-content">
                            这是列表内块中内容的简介，这篇文章主要分析这篇文章主要分析下左右布局的实现， 以及如何在左右布局的基础上实现一个自适应效果， 感兴趣的同学可以点击进入阅读全文
                        </div>
                        <div class="main-btn">
                            <button type="button" class="main-btn1">阅读全文<tton>
                        </div>
                    </div>

                    <div class="left-content-main">
                        <h2 class="main-title"><a href="#">左半部内容大标题</a></h2>
                        <div class="main-note">
                            <span class="main-note-left">作者：我是作者 日期：2016-07-14 点击：我是点击量</span>
                            <span class="main-note-right">
                                <a href="#">这是</a>
                                <a href="#">内容</a>
                                <a href="#">的</a>
                                <a href="#">标签</a>
                            </span>
                        </div>
                        <div class="main-content">
                            这是列表内块中内容的简介，这篇文章主要分析这篇文章主要分析下左右布局的实现， 以及如何在左右布局的基础上实现一个自适应效果， 感兴趣的同学可以点击进入阅读全文
                        </div>
                        <div class="main-btn">
                            <button type="button" class="main-btn1">阅读全文<tton>
                        </div>
                    </div>

                    <div class="left-content-main">
                        <h2 class="main-title"><a href="#">左半部内容大标题</a></h2>
                        <div class="main-note">
                            <span class="main-note-left">作者：我是作者 日期：2016-07-14 点击：我是点击量</span>
                            <span class="main-note-right">
                                <a href="#">这是</a>
                                <a href="#">内容</a>
                                <a href="#">的</a>
                                <a href="#">标签</a>
                            </span>
                        </div>
                        <div class="main-content">
                            这是列表内块中内容的简介，这篇文章主要分析这篇文章主要分析下左右布局的实现， 以及如何在左右布局的基础上实现一个自适应效果， 感兴趣的同学可以点击进入阅读全文
                        </div>
                        <div class="main-btn">
                            <button type="button" class="main-btn1">阅读全文<tton>
                        </div>
                    </div>

                    <div class="left-content-main">
                        <h2 class="main-title"><a href="#">左半部内容大标题</a></h2>
                        <div class="main-note">
                            <span class="main-note-left">作者：我是作者 日期：2016-07-14 点击：我是点击量</span>
                            <span class="main-note-right">
                                <a href="#">这是</a>
                                <a href="#">内容</a>
                                <a href="#">的</a>
                                <a href="#">标签</a>
                            </span>
                        </div>
                        <div class="main-content">
                            这是列表内块中内容的简介，这篇文章主要分析这篇文章主要分析下左右布局的实现， 以及如何在左右布局的基础上实现一个自适应效果， 感兴趣的同学可以点击进入阅读全文
                        </div>
                        <div class="main-btn">
                            <button type="button" class="main-btn1">阅读全文<tton>
                        </div>
                    </div>

                </div>
            </div>
            <!-- page-left end -->
            <!-- page-right start -->
            <div class="page-content-right">
                <div class="right-content">
                    <div class="box"></div>

                    <div class="right-search" >
                        <div class="right-search-content">
                            <input title="请输入您想搜索的关键词。" class="right-txt" type="text">
                            <input type="submit" value="" class="right-btn" />
                        </div>
                    </div>

                    <div class="box"></div>

                    <div class="right-img">
                        <div class="right-img-content">
                            <a href="#"><img src="images/1.png"></a>
                        </div>
                        <div class="right-img-content">
                            <a href="#"><img src="images/2.png"></a>
                        </div>
                        <div class="right-img-content">
                            <a href="#"><img src="images/3.png"></a>
                        </div>
                    </div>
     
                    <div class="box"></div>

                    <div class="right-main">
                        <h2>合作网站</h2>
                        <div class="right-main-content">
                            <ul class="right-main-txt">
                                <li>
                                    <a href="//github.com/airen/jsStudy" target="_blank">JavaScript学习案例</a></li>
                                <li>
                                    <a href="//moyu-edu.com/js.html" target="_blank" title="墨鱼前端培训">墨鱼前端培训</a></li>
                                <li>
                                    <a href="//www.html5dw.com/" target="_blank" title="HTML5梦工场">HTML5梦工场</a></li>
                                <li>
                                    <a href="//www.w3cplus.com/sassguide/index.html" target="_blank" title="Sass入门指南">Sass入门指南</a></li>
                                <li>
                                    <a href="//www.w3cplus.com/solution/index/index.html" target="_blank" title="CSS解决方案">CSS解决方案</a></li>
                                <li>
                                    <a href="//www.w3ctech.com/" target="_blank" title="中国最大的前端技术社区">W3ctech</a></li>
                                <li>
                                    <a href="//fequan.com/" target="_blank" title="前端圈">前端圈</a></li>
                                <li>
                                    <a href="//drupalchina.cn" target="_blank">Drupal中国</a></li>
                            </ul>
                        </div>
                    </div>
                    
                    <div class="box"></div>

                    <div class="right-main">
                        <h2>合作网站</h2>
                        <div class="right-main-content">
                            <ul class="right-main-txt">
                                <li>
                                    <a href="//github.com/airen/jsStudy" target="_blank">JavaScript学习案例</a></li>
                                <li>
                                    <a href="//moyu-edu.com/js.html" target="_blank" title="墨鱼前端培训">墨鱼前端培训</a></li>
                                <li>
                                    <a href="//www.html5dw.com/" target="_blank" title="HTML5梦工场">HTML5梦工场</a></li>
                                <li>
                                    <a href="//www.w3cplus.com/sassguide/index.html" target="_blank" title="Sass入门指南">Sass入门指南</a></li>
                                <li>
                                    <a href="//www.w3cplus.com/solution/index/index.html" target="_blank" title="CSS解决方案">CSS解决方案</a></li>
                                <li>
                                    <a href="//www.w3ctech.com/" target="_blank" title="中国最大的前端技术社区">W3ctech</a></li>
                                <li>
                                    <a href="//fequan.com/" target="_blank" title="前端圈">前端圈</a></li>
                                <li>
                                    <a href="//drupalchina.cn" target="_blank">Drupal中国</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!--page-right end-->
        </div>
        <!--page-content end-->
    </div>
    <!--page end-->
    <!--foot start-->
    <div class="foot">
        <!--foot-col start-->
        <div class="foot-col">
            <div class="foot-col-body">
                <div class="foot-col-content">

                    <h2>关于我们</h2>

                    <div class="foot-col-content-media">
                        <div class="media-body">
                            <p>W3cplus是一个致力于推广国内前端行业的技术博客。它以探索为己任，不断活跃在行业技术最前沿，努力提供高质量前端技术博文；其文章范围广泛，主要以CSS3、HTML5、处理器、Mobile、动画和各类DEMO为主。</p>
                            <p>W3cplus提供相关广告展示与招聘发布，有需要的请联系：微信号w3cplus，E-mail:<a href="mailto:airenliao@gmail.com" target="_blank">airenliao@gmail.com</a></p>
                        </div>
                    </div>
                </div>
                <div class="foot-col-content">

                    <h2>关于我们</h2>

                    <div class="content">

                        <div class="media-body">
                            <p>W3cplus是一个致力于推广国内前端行业的技术博客。它以探索为己任，不断活跃在行业技术最前沿，努力提供高质量前端技术博文；其文章范围广泛，主要以CSS3、HTML5、处理器、Mobile、动画和各类DEMO为主。</p>
                            <p>W3cplus提供相关广告展示与招聘发布，有需要的请联系：微信号w3cplus，E-mail:<a href="mailto:airenliao@gmail.com" target="_blank">airenliao@gmail.com</a></p>
                        </div>
                    </div>
                </div>
                <div class="foot-col-content">

                    <h2 class="h2">关于我们</h2>

                    <div class="content">

                        <div class="media-body">
                            <p>W3cplus是一个致力于推广国内前端行业的技术博客。它以探索为己任，不断活跃在行业技术最前沿，努力提供高质量前端技术博文；其文章范围广泛，主要以CSS3、HTML5、处理器、Mobile、动画和各类DEMO为主。</p>
                            <p>W3cplus提供相关广告展示与招聘发布，有需要的请联系：微信号w3cplus，E-mail:<a href="mailto:airenliao@gmail.com" target="_blank">airenliao@gmail.com</a></p>
                        </div>
                    </div>
                </div>
            </div>           
        </div>
        <!--foot-col end-->
        <!--footer start-->
        <div class="footer">
            <div class="footer-content">
                <p>stylus样式库左右布局-zzu</p>
            </div>               
        </div>
        <!--footer end-->
    </div>
    <!--foot end-->

</body>

</html>